<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">菜单设置</div>
                <div class="layui-card-body">
                    <div style="margin-bottom: 10px;">
                        <div class="layui-input-item" style="float:left;padding-right:10px;">
                            <form class="layui-form">
                                <div class="layui-inline">
                                    <a id="btn-add" class="layui-btn">添加</a>
                                    <a id="btn-fold" class="layui-btn layui-btn-primary">折叠</a>
                                    <a id="btn-refresh" class="layui-btn layui-btn-primary">刷新</a>
                                </div>
                            </form>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <table class="layui-hide" id="menu-table" lay-filter="menu-table"></table>
                    <script type="text/html" id="toolbar-operation">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">详情</a>
                        <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
                        <!-- <a id="btn-batch-delete layui-btn-xs" class="layui-btn layui-btn-danger">删除</a> -->
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="popup-form">
    <div class="layui-card">
        <div class="layui-card-header">菜单项详情</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="popup-form">
                <input type="hidden" name="id">
                <input type="hidden" name="parentId" value="0">
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单项名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单项图标</label>
                    <div class="layui-input-block">
                        <input type="text" name="icon" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">菜单项地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">序号</label>
                    <div class="layui-input-block">
                        <input type="number" name="sn" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-submit">确定
                    </button>
                </div>
            </form>
        </div>
    </div>
</script>
<script src="/layui/layui.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index'
    }).use(['index', 'table', 'form', 'treeGrid'], function () {
        var $ = layui.$;
        var form = layui.form;
        var admin = layui.admin;
        var treeGrid = layui.treeGrid;
        var popupIndex;

        var tree = treeGrid.render({
            id: 'menu-table',
            elem: '#menu-table',
            url: 'menus',
            cellMinWidth: 100,
            idField: 'id',//必須字段
            treeId: 'id',//树形id字段名称
            treeUpId: 'parentId',//树形父id字段名称
            treeShowName: 'name',//以树形式显示的字段
            height: '100%',
            isFilter: false,
            iconOpen: false,//是否显示图标【默认显示】
            isOpenDefault: true,//节点默认是展开还是折叠【默认展开】
            loading: true,
            method: 'get',
            isPage: false,
            cols: [[
                {field: 'name', title: '菜单项名称'},
                {field: 'icon', width: 220, title: '图标'},
                {
                    width: 80, title: '预览', align: 'center', templet: function (d) {
                        return '<i class="' + d.icon + '"></i>';
                    }
                },
                {field: 'sn', width: 80, align: 'center', title: '序号'},
                {field: 'url', width: 400, title: '菜单项地址'},
                {
                    width: 200, title: '操作', align: 'center', toolbar: '#toolbar-operation'
                }
            ]],
            parseData: function (res) {//数据加载后回调
                return res;
            },
            onClickRow: function (index, o) {
                //console.log(index, o, "单击！");
            },
            onDblClickRow: function (index, o) {
                //console.log(index, o, "双击");
            },
            onCheck: function (obj, checked, isAll) {//复选事件
                //console.log(obj, checked, isAll, "复选");
            },
            onRadio: function (obj) {//单选事件
                //console.log(obj, "单选");
            }
        });

        function showPopupForm() {
            popupIndex = admin.popupRight({
                area: '360px',
                success: function () {
                    var formHtml = $('#popup-form').html();
                    $('#' + this.id).html(formHtml);
                    form.render();
                }
            });
            return popupIndex;
        }

        function closePopupForm() {
            if (popupIndex) {
                layer.close(popupIndex);
            }
        }

        /* function toggleFold() {
             var treedata = treeGrid.getDataTreeList('menu-table');
             treeGrid.treeOpenAll('menu-table', !treedata[0][treeGrid.config.cols.isOpen]);
         }*/

        $("#btn-add").on('click', function () {
            popupIndex = showPopupForm();
        });

        $("#btn-fold").on('click', function () {
            var treedata = treeGrid.getDataTreeList('menu-table');
            var isOpen = treedata[0][treeGrid.config.cols.isOpen];
            treeGrid.treeOpenAll('menu-table', !isOpen);
            if (isOpen) {
                $(this).text('展开');
            } else {
                $(this).text('折叠');
            }
        });

        $("#btn-refresh").on('click', function () {
            treeGrid.reload('menu-table');
        });

        $("#btn-batch-delete").on('click', function () {
            layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
                var ids = [];
                var data = table.checkStatus('menu-table').data;
                for (let i in data) {
                    ids.push(data[i].id);
                }
                $.ajax({
                    url: 'menus/' + ids.toString(),
                    type: 'DELETE',
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('删除成功');
                            table.reload('menu-table');
                        } else {
                            layer.msg('删除失败');
                        }
                    }
                });
            });
        });

        treeGrid.on('tool(menu-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'add') {
                showPopupForm();
                form.val('popup-form', {parentId: data.id});
            } else if (obj.event === 'del') {
                layer.confirm('真的删除该记录吗？', function (index) {
                    $.ajax({
                        url: 'menus/' + data.id,
                        type: 'DELETE',
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('删除成功');
                                treeGrid.reload('menu-table');
                            } else {
                                layer.msg('删除失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                console.log(data);
                showPopupForm();
                form.val('popup-form', data);
            }
        });

        form.on('submit(form-submit)', function (data) {
            $.ajax({
                url: 'menus',
                type: 'PUT',
                data: data.field,
                success: function (result) {
                    if (result.code == 200) {
                        layer.msg('操作成功');
                        treeGrid.reload('menu-table');
                    } else {
                        layer.msg('提交失败');
                        console.error('提交失败');
                    }
                }
            });
            closePopupForm();
            return false;
        });

    });
</script>
</body>
</html>